<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8">
  <!-- import CSS -->
  <title>电池信息统计</title>
  <link rel="shortcut icon" href="../favicon.ico">
  <link rel="stylesheet" href="../plugins/ElementUI/index-2.3.9.css">
  <link href="../css/common.css" rel="stylesheet">
  <style type="text/css">
    .el-aside {
      color: #333;
      padding: 10px;
    }
    .el-main {
      color: #333;
      text-align: center;
    }
    /* baidu map */
    body, html{width: 100%;height: 100%;overflow: hidden;margin:0;font-family:"微软雅黑";}
    #the_chart{width:100%;height:calc(100% - 45px);overflow: hidden;margin:0;font-family:"微软雅黑";}
		#result {width:100%}
  </style>  
  <!-- map -->
  <script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=ePOIA9rln4os58j2HQnx3AW0Sdy9MiQv"></script>
  <script type="text/javascript" src="http://api.map.baidu.com/library/LuShu/1.2/src/LuShu_min.js"></script>  
  <!-- import Vue before Element -->
  <script src="../plugins/ElementUI/vue-2.5.16.js" type="text/javascript"></script>
  <!-- import JavaScript -->
  <script src="../plugins/ElementUI/index-2.3.9.js" type="text/javascript"></script>
  <script src="../plugins/ElementUI/vue-resource.min.js"></script>
  <script src="../plugins/ECharts/echarts-4.1.0.js"></script>

</head>
<body>
  <div id="app" v-cloak v-show="appShow" class="animated fadeInRight">
    <el-container>
      <el-aside width="">
        <el-form :model="formData">
          <el-form-item label="车牌号" label-width="60px">
            <el-input size="small" clearable v-model="formData.plateNo"></el-input>
          </el-form-item>
          <el-row type="flex">
            <el-col>
              <el-form-item label="VIN码" label-width="60px">
                <el-input size="small" clearable v-model="formData.vinCode"></el-input>
              </el-form-item>
            </el-col>
            <el-form-item label-width="10px">
              <el-button type="primary" size="small" @click="onSubmit">搜  索</el-button>
            </el-form-item>
          </el-row>
        </el-form>
        <el-button type="text">注：勾选车辆，选择时间段，显示统计图！</el-button>
        <el-table :data="formTable.list" border highlight-current-row size="small" :height="windowHeight" style="width:100%">
          <el-table-column width="32" label="#">
              <template slot-scope="scope">
                  <el-radio :label="scope.$index" v-model="templateRadio" @change.native="getTemplateRow(scope.$index,scope.row)"></el-radio>
              </template>
          </el-table-column>
          <el-table-column prop="plateNo" label="车牌号"></el-table-column>
          <el-table-column prop="vinCode" label="VIN码" width="145"></el-table-column>
          <el-table-column prop="vehicleType" label="车型"></el-table-column>
        </el-table>
        <br>
        <el-pagination
          background
          layout="prev, pager, next"
          :page-size="pagination.pageSize"
          :current-page="pagination.page"
          :total="formTable.totalElement"
          @current-change="handleCurrentChange">
        </el-pagination>
        <br>
        <el-form :model="formData">
          <el-form-item label="开始时间" label-width="70px">
            <el-date-picker
              v-model="datePicker.dataStart"
              type="datetime"
              size="small"
              style="width: 100%"
              :picker-options="pickerOptionStart"
              placeholder="开始日期">
            </el-date-picker>
          </el-form-item>
          <el-row type="flex">
            <el-col>
              <el-form-item label="结束时间" label-width="70px">
                <el-date-picker
                  v-model="datePicker.dataEnd"
                  type="datetime"
                  size="small"
                  style="width: 100%"
                  :picker-options="pickerOptionEnd"
                  placeholder="开始日期">
                </el-date-picker>
              </el-form-item>
            </el-col>
            <el-form-item label-width="10px">
              <el-button type="primary" size="small" @click="determine">确  定</el-button>
            </el-form-item>
          </el-row>
        </el-form>
      </el-aside>
      <el-main>
          <div id="the_chart"></div> 
      </el-main>
    </el-container>
  </div>
</body>
  <script src="../plugins/Underscore/underscore-min.js"></script>
  <script src="../js/ApiRequest.js"></script>
  <script>
    var vm = new Vue({
      el: '#app',
      data: function() {
        return { 
          appShow:false,
          windowHeight: (window.innerHeight||(document.documentElement&&document.documentElement.clientHeight)||document.body.clientHeight) - 415,
          pickerOptionStart: {
            disabledDate:function(time){
              if(vm.datePicker.dataEnd){
                var curDate = vm.datePicker.dataEnd.getTime();

                var h = vm.datePicker.dataEnd.getHours() *60*60;
                var m = vm.datePicker.dataEnd.getMinutes() *60;
                var s = vm.datePicker.dataEnd.getSeconds();
                var mm = (h+m+s)*1000;

                if(mm>0){
                  return time.getTime() > curDate || time.getTime() < curDate-mm;;
                }else{
                  return time.getTime() > curDate || time.getTime() < curDate;;
                }
              }else{
                return time.getTime() > Date.now()
              }
            }
          },
          pickerOptionEnd: {
            disabledDate:function(time){
              if(vm.datePicker.dataStart){
                var curDate = vm.datePicker.dataStart.getTime();

                var h = vm.datePicker.dataStart.getHours() *60*60;
                var m = vm.datePicker.dataStart.getMinutes() *60;
                var s = vm.datePicker.dataStart.getSeconds();
                var mm = (h+m+s)*1000;

                if(mm>0){
                  return time.getTime() > curDate || time.getTime() < curDate-mm;;
                }else{
                  return time.getTime() > curDate || time.getTime() < curDate;;
                }

              }else{
                return time.getTime() > Date.now()
              }
            }
          },
          formData:{},
          datePicker:{vinCode:'',dataStart:'',dataEnd:''},
          templateRadio:"",
          chart:"",
          theEchart:"",
          optionChart:"",
          dataChart:{},
          formTable:{},
          pagination:{
            page:1,
            pageSize:15
          }
        }
      },
      mounted:function(){
        this.$nextTick(function(){
          this.posRequest()
          this.initChart()
        })
      },
      updated:function(){
        this.appShow = true
      },
      methods: {
          onSubmit:function(){
            this.pagination.page = 1
            this.posRequest()
          },
          determine:function(){
            if(this.datePicker.vinCode == ""){this.$message.error('请勾选车辆，查看轨迹...');return}
            if(!this.datePicker.dataStart || !this.datePicker.dataEnd){this.$message.error('请选择时间段，查看轨迹...');return}
            var data={
              startTime:formatTime(this.datePicker.dataStart,"yyyy-MM-dd HH:mm:ss"),
              endTime:formatTime(this.datePicker.dataEnd,"yyyy-MM-dd HH:mm:ss"),
              vin:this.datePicker.vinCode
            }
            console.log(data)
            resourceRequst("/battery/queryBatteryInfoDetail",data,function(res){
                vm.dataChart = res.batteryList
            })
          },
          handleCurrentChange:function(val){
            this.pagination.page = val
            this.posRequest()
          },
          initChart:function(){
            var _this = this;
            setTimeout(function(){
              _this.chart = document.getElementById("the_chart")
              if(_this.chart.offsetWidth){
                _this.theEchart = echarts.init(_this.chart);
                _this.optionChart = {
                    tooltip: {
                        trigger: 'axis'
                    },
                    legend: {
                        // data:['soc','电流','电压','最大电流','最大电压']
                    },
                    grid: {
                        left: '3%',
                        right: '4%',
                        bottom: '3%',
                        containLabel: true
                    },
                    toolbox: {
                        feature: {
                            // saveAsImage: {}
                        }
                    },
                    xAxis: {
                        type: 'category',
                        boundaryGap: false,
                        axisLabel: {  
                          interval:0,  
                          margin:15,
                          rotate:-40  
                        }, 
                        data: []
                    },
                    yAxis: {
                        type: 'value'
                    },
                    series: [
                        {
                            name:'SOC',
                            type:'line',
                            data:[]
                        },
                        {
                            name:'电流',
                            type:'line',
                            data:[]
                        },
                        {
                            name:'电压',
                            type:'line',
                            data:[]
                        } 
                    ]
                }
                _this.theEchart.setOption(_this.optionChart);
              }else{
                _this.initChart()
              }
            },500)            
          },
          getTemplateRow:function(index,row){//获取选中数据
              this.datePicker.vinCode = row.vinCode;
          },
          posRequest:function(){
            var data = {
              "plateNo":this.formData.plateNo, 
              "vinCode":this.formData.vinCode, 
              "page":this.pagination.page-1 ,
              "pageSize":this.pagination.pageSize
            }
            resourceRequst("/vehicle/queryVehicleInfo",data,function(res){
                vm.formTable = res.getResult
            })
          }
      },
      watch:{
        dataChart:function(val){
          var soc = [];
          var totalCurrent = [];
          var totalVoltage = [];
          var dateTime = [];
          _.each(val,function(ele,index){
            soc.push(ele.soc)
            totalCurrent.push(ele.totalCurrent)
            totalVoltage.push(ele.totalVoltage)
            dateTime.push((ele.uploadTime).split(" ")[1])
          })

          this.optionChart.series[0].data = soc;
          this.optionChart.series[1].data = totalCurrent;
          this.optionChart.series[2].data = totalVoltage;
          this.optionChart.xAxis.data = dateTime
          this.theEchart.setOption(this.optionChart);
        }
      }
    })
  </script>
</html>